<!--  -->
<template>
  <div class='cityConfigArea'>
      <div class="cityConfigArea_circleLine" v-for="(item,key,index) in allSelectList" :key="index" >
          <span class="cityConfigArea_alertMess">{{key}}</span>
          <Button class="cityConfigArea_alertMessButton" type="primary" @click="circleLineAdd(key)">新增</Button>
          <div>
              <span  v-for="val in item" :key="val.id" class="cityConfigArea_circleLine_span"  @mouseover="$set(val,'hover',true)"  @mouseleave="$set(val,'hover',false)">
                  {{val.baseTagsName}}   
                  <span v-if="val.hover" class="cityConfigArea_circleLine_spanMess">
                      <Icon class="cityConfigArea_circleLine_edit" color="white" size="22" @click.stop="circleLineUpdate(val)" type="md-settings" />
                      <Icon class="cityConfigArea_circleLine_delete" color="red" size="22" @click.stop="deleMoreSpan(val)" type="md-close" />
                  </span>
               </span>
          </div>
      </div>
      <!-- 新增 -->
      <Modal v-model="addMoreModal" width="500" title="新增" :footer-hide='true'>
         <div>
           <Form ref="formValidate" :model="addMoreMess" :rules="ruleValidate" :label-width="120">
                <FormItem label="标签名称" prop="baseTagsName">
                    <Input type="text"  v-model="addMoreMess.baseTagsName" placeholder="请输入模块名字" class="cityConfigArea_moudle_select"></Input>
                </FormItem>
                <FormItem class="cityList_moudle_footer">
                    <Button class="cityConfigArea_cancelButton" @click="addMoreModal = false">取消</Button>
                    <Button type="primary" @click="addMoreSubmit('formValidate')">确定</Button>
                </FormItem>
            </Form>
        </div>
      </Modal>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import simpleImportcity from "@/components/simple_importcity";
import {getCitytagList, getCitytagUpdate, getCitytagCreate, getCitytagDelete} from "@/api/cityConfig"
export default {
components: {draggable, simpleImportcity},
data() {
 const ruleValidateCodeList = (rule, data, callback) =>{
     console.log(65656)
   if(data.length < 1)return callback("请至少选择一个")
   callback()
 }
 return {
     allSelectList:{
        '楼盘特色':[],
        '户型特色':[],
        '地产类型':[],
        '建筑类别':[],
        '其他特色':[]
     },
    tagNames:['楼盘特色','户型特色','地产类型','建筑类别','其他特色'],
    addMoreMess:{
     baseTagsName:'',
     baseTagsType:''
    },
    addMoreModal:false,
    ruleValidate:{
      baseTagsName:[{ required: true, message: '请填写标签名称', trigger: 'blur' }]
    },
    currentMess:{
        list:[]
    },
    checkMoudle:false,
    checkMoudleError:false,
    checkMoudleErrorMess:'',
    MoreSelectList:[]
};
},
computed: {},
watch: {},
methods: {
   //获取列表
   getAllSelectList(){
      getCitytagList({cityCode:this.$route.query.code,baseTagsType:1}).then(res=>{
         console.log("获取列表", res);
          let mess={ 'buildingFeature':'楼盘特色',
                     "houseTypeFeature":'户型特色',
                     "propertyType":'地产类型',
                     "buildingType":'建筑类别',
                     "otherFeature":'其他特色'
                   };         
          for (const key in res) {
            if (res.hasOwnProperty(key)) {
                this.allSelectList[mess[key]] = res[key]
            }
          }
        //   res.list.map(item=>{
        //      let name = item.tagType>4?this.tagNames[4]:this.tagNames[item.tagType-1];
        //      mess[name].push(item);
        //   })
        //   this.allSelectList = mess;
        //  console.log(mess)
      })
    
   },
  
   //点击新增确认按钮
   addMoreSubmit(mess){
       console.log(999,mess)
       this.$refs[mess].validate((valid)=>{
         if(valid){
             this.addMoreMess.cityCode = this.cityCode;
             console.log(this.addMoreMess);
             this.addMoreMess.baseTagsId?getCitytagUpdate({baseTagsId:this.addMoreMess.baseTagsId,cityCode:this.cityCode,baseTagsName: this.addMoreMess.baseTagsName}).then(res=>{
                 this.$Message.success("修改成功");
                 this.getAllSelectList();
             }) : getCitytagCreate(this.addMoreMess).then(res=>{
                  console.log("添加成功",res)
                  this.$Message.success("添加成功");
                  this.getAllSelectList();
             })
             this.addMoreModal = false;
             this.addMoreMess = { baseTagsName:'', baseTagsType:''},
             this.$refs[name].resetFields();
         }
       })
   },
   //点击新增按钮
   circleLineAdd(name,mess){
       console.log(mess)
     this.addMoreMess.baseTagsType = this.tagNames.findIndex(item=>item == name) +1
     mess?((this.addMoreMess.tagId=mess.id) && (this.addMoreMess.baseTagsName = mess.baseTagsName)):this.addMoreMess.baseTagsName=""
     this.addMoreModal = true;
   },
   //修改
   circleLineUpdate(mess){
     this.addMoreMess = this.$tool.deepClone(mess);
     this.addMoreModal = true;
   },
   //删除某一个span标签
 deleMoreSpan(mess){
    getCitytagDelete({baseTagsId: mess.baseTagsId}).then(res=>{
       this.$Message.success("删除成功");
       this.getAllSelectList();
    }) 
 }
},
beforeCreate(){
  this.cityCode = this.$route.query.code
},
created() {
  this.getAllSelectList();
},
mounted() {

},
}
</script>
<style lang='scss' scoped>
 .cityConfigArea{
   &_circleLine{
      box-shadow: 0px 0px 6px 0px rgba(116,119,121,0.2);
      padding: 8px;
      margin: 20px 0;
      background-color: #f8f8f9; 
      &_span{
       border: 1px solid #ccc;
       padding: 6px 20px;
       margin-right: 8px;
       border-radius: 4px;
       margin-bottom: 9px;
       display: inline-block;
       position: relative;
      }
      &_spanMess{
       position: absolute;
       left: 0px;
       top: 0px;
       width: 100%;
       height: 100%;
       background-color: rgba(0,0,0,0.3);
       text-align: center;
       line-height: 35px;
       border-radius: 4px;
       padding: 5px 7px;
       cursor: pointer;
       
      }
      &_edit{
           float: left;
       }
       &_delete{
           float: right;
       }
   }
   &_alertMess{
     font-size: 16px;
     font-weight: 700;
     float: left;
     margin-top: 6px;
     .red{
      color: red;
     }
   }
   &_alertMessButton{
       margin: 0 8px 25px 8px;
   }
   &_moudle_select{
     width: 306px;
     margin-right: 10px;
   }
   &_moudle_inputList{
       margin-bottom: 10px;
   }
   &_moudle_icon{
     vertical-align: text-top;  
   }
   
   .pagePublicStyle{
    text-align: right;
    padding: 14px 0;
    margin-right: 30px;
  }
  .totalCount{
    float: left;
    line-height: 34px;
    padding-left: 20px;  
  }
 }
 .cityList_moudle_footer {
     /deep/.ivu-form-item-content{
      text-align: right;
      margin-right: 42px; 
    }
  
}
  .cityConfigArea_cancelButton{
      margin-right: 6px;
  }
  .circleLineModal{
    &_select{
     width: 200px;
    margin-bottom: 10px;
  }
  &_footer{
      border-top: 1px solid #ccc;
      margin-top: 6px;
      padding-top: 8px;
  }
   &_cut{
     font-size: 22px;
     display: inline-block;
     margin-right: 8px;  
   }
   &_name,&_unit{
     vertical-align: middle;
    height: 32px;
    display: inline-block  
   }
   &_unit{
     margin-right: 10px;
   }
   &_errorMess{
    font-size: 12px;
    color: red;
    font-weight: 700;
    margin-left: 40px; 
   }
  }
</style>